<template>
    <el-row :gutter="gutter" class="upload-container">
        <el-col v-for="(item, index) in uploadedImgs" :key="index" :span="span">
            <div class="item" :style="{'background-image': `url(${item[options.img]})`, marginBottom: gutter+'px'}">
                <div class="item-container">
                    <!--工具icon-->
                    <div class="uploaded-tools">
                        <i class="tools-icon el-icon-zoom-in" @click.stop="imgView(item[options.img])" />
                        <i class="tools-icon el-icon-edit-outline" @click.stop="imgEdit(item, index)" />
                        <i class="tools-icon el-icon-delete" @click.stop="imgDelete(index)" />
                        <div class="tools-move">
                            <i class="el-icon-arrow-left" @click.stop="imgMove(index,-1)" />
                            <i class="el-icon-arrow-right" @click.stop="imgMove(index,1)" />
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <!--新增-->
        <el-col :span="span">
            <div v-loading="uploadDialogShow" class="item add-block" :style="{marginBottom: gutter+'px'}" @click="openUpload()">
                <div class="item-container">
                    <i class="el-icon-plus add-icon" />
                </div>
            </div>
        </el-col>
        <!--弹窗-->
        <el-dialog title="上传图片" custom-class="custom-dialog-form" :visible.sync="uploadDialogShow" width="420px" :close-on-click-modal="false">
            <el-form ref="rePwdForm" :rules="uploadDialogRules" :model="temp" label-position="top">
                <el-form-item label="图片上传" prop="img">
                    <UploadImgList v-model="temp[options.img]" :gutter="0" :span="12" :multiple="false" class="cover-map-16-9" />
                </el-form-item>
                <el-form-item v-for="item in options.field" :key="item.name" :label="item.tips" :prop="item.name">
                    <el-input v-if="!item.type" v-model="temp[item.name]" :placeholder="item.tips" />
                    <el-date-picker v-if="item.type === 'date'" v-model="temp[item.name]" type="date" :placeholder="item.tips" value-format="yyyy-MM-dd"/>
                    <el-select v-if="item.type === 'select'" v-model="temp[item.name]" :placeholder="item.tips" filterable collapse-tags>
                        <el-option v-for="child in item.options" :key="child[item.key||'key']" :label="item.label" :value="child[item.value||'value']" />
                    </el-select>
                </el-form-item>
                <div class="el-message-box__btns">
                    <button type="button" class="el-button el-button--default" @click="uploadDialogShow = false"><span>取消</span></button>
                    <button type="button" class="el-button el-button--default el-button--primary" @click="uploadDialogSave()"><span>保存</span></button>
                </div>
            </el-form>
        </el-dialog>
    </el-row>
</template>

<script>
import { remakeUrl, arrMove } from '@/utils'
import UploadImgList from '@/components/UploadImgList'

export default {
    name: 'UploadImgInfoList',
    components: { UploadImgList },
    props: {
        gutter: {
            type: Number,
            default: 0
        },
        span: {
            type: Number,
            default: 24
        },
        multiple: {
            type: Boolean,
            default: true
        },
        value: {
            type: Array,
            default: function() {
                return []
            }
        },
        options: {
            type: Object,
            default: function() {
                return {
                    img: 'img',
                    field: []
                }
            }
        },
        extra: {
            type: Object,
            default: function() {
                return {}
            }
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data: function() {
        return {
            uploadDialogShow: false,
            temp: {},
            uploadedImgs: [],
            dialogVisible: false,
            dialogImageUrl: ''
        }
    },
    computed: {
        uploadDialogRules: function() {
            return {}
        }
    },
    watch: {
        value() {
            this.uploadedImgs = this.value ? this.value : []
        },
        uploadedImgs(val) {
            this.$emit('input', this.uploadedImgs)
        }
    },
    created() {
        this.uploadedImgs = this.value ? this.value : []
    },
    methods: {
        remakeUrl,
        openUpload() {
            console.log('开始上传')
            this.temp = {}
            this.uploadDialogShow = true
        },
        imgEdit(item, index) {
            console.log('编辑', item);
            this.temp = { ...item, order: index }
            this.uploadDialogShow = true
        },
        uploadDialogSave() {
            console.log('保存内容', this.temp)
            const NEW_INFO = Object.assign(this.extra, this.temp)
            if ('order' in NEW_INFO) {
                const defaultData = [...this.uploadedImgs]
                const INDEX = NEW_INFO.order
                defaultData[INDEX] = NEW_INFO
                this.uploadedImgs = defaultData
            } else {
                this.uploadedImgs.push(NEW_INFO)
            }
            this.temp = {}
            this.uploadDialogShow = false
        },
        imgView(src) {
            window.open(src)
        },
        imgDelete(index) {
            this.uploadedImgs.splice(index, 1)
        },
        imgMove(index, step) {
            this.uploadedImgs = arrMove(this.uploadedImgs, index, step)
        }
    }
}
</script>

<style lang="scss" scoped>
@import "src/styles/variables";

.upload-container {
    .item {
        position: relative;
        padding-bottom: 100%;
        background: {
            color: #ddd;
            position: center;
            size: contain;
            repeat: no-repeat;
        };
        border: 1px dashed #ddd;
        border-radius: 4px;
        box-sizing: border-box;
        transition: .3s;

        .item-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            z-index: 2;

            .uploaded-tools {
                position: relative;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                color: #fff;
                background-color: rgba(0, 0, 0, .5);
                opacity: 0;
                visibility: hidden;
                transition: .3s;

                i {
                    display: block;
                    padding: 2px;
                    opacity: 0.8;
                    cursor: pointer;
                    text-shadow: 0 0 2px #ccc;
                    transition: .3s;

                    + i {
                        margin-left: 8px;
                    }

                    &:hover {
                        opacity: 1;
                        color: $subColor;
                    }
                }

                .tools-icon {
                    position: relative;
                }

                .tools-move {
                    position: absolute;
                    bottom: 4px;
                    left: 4px;
                    display: flex;
                    align-items: center;
                }
            }

            &:hover {
                .uploaded-tools {
                    opacity: 1;
                    visibility: visible;
                }
            }
        }

        &.add-block {
            background-color: #fbfdff;
            cursor: pointer;

            .item-container {
                .add-icon {
                    font-size: 28px;
                    color: #8c939d;
                    transition: .3s;
                }
            }

            &:hover {
                border-color: $mainColor;

                .add-icon {
                    color: $mainColor;
                }
            }
        }
    }
}
</style>
